{include file="public/header-static"/} {include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="card bor" style="height: calc( 100% - 45px ) ;">
                        <div class="titleData">
                            <div class="left">
                                <strong>订单总数</strong>
                                <p style="font-size: 24px;">{$orderData['totalOrder']}</p>
                            </div>
                            <div class="right">
                                <div class="right-item">
                                    <i></i> 收益
                                    <strong style="color: #FF7F00">{$orderData['totalIncome']}</strong>
                                </div>
                                <div class="right-item">
                                    <i></i> 支出
                                    <strong style="color: #FF3A3A">{$orderData['totalExpenses']}</strong>
                                </div>
                                <div class="right-item">
                                    预计支出
                                    <strong style="color: #0095ff">{$orderData['expectedExpenses']}</strong>
                                </div>
                                <div class="right-item">
                                    增长比例
                                    <strong>{$orderData['increase']}</strong>
                                </div>
                            </div>
                        </div>
                        <canvas id="balanceData"></canvas>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bor" style="height: calc( 100% - 45px ) ;">
                        <div class="card-dth2">
                            <div class="user" style="width: 100%;">
                                <div class="user-name" style="margin-top: 10px;">市场需求订单数据</div>
                            </div>
                            <div style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
                                <div style="width: 100%;display: grid;place-items: center;">
                                    <canvas id="demandData" width="170" height="170"></canvas>
                                </div>
                                <div class="demandDataArr">
                                    <span style="color: #2A2F3CFF;">{$demandData.totalCompletedDemand}
                                        <p>已完成订单数</p>
                                    </span>
                                    <span style="color: #1C73FEFF;">{$demandData.totalHandoverDemand}
                                        <p>交接中订单数</p>
                                    </span>
                                    <span style="color: #F74AFFFF;">-{$demandData.expensesPrice}
                                        <p>支出金额</p>
                                    </span>
                                    <span style="color: #F27E1BFF;">-{$demandData.expectedExpensesPrice}
                                        <p>预支出金额</p>
                                    </span>
                                    <span style="color: #1C73FEFF;">{$demandData.platformPrice}
                                        <p>平台收益</p>
                                    </span>
                                </div>
                            </div>


                            <!-- <div class="user">
                                <div class="user-name" style="margin-top: 10px;">部门总营业额</div>
                                <div class="u-rig" style="justify-content: flex-end;">
                                    <div class="findResource-legend">
                                        <div class="bg-txt">
                                            <i class="icon"></i>
                                            <text class="str">总营业额</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            123
                                            <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                            <div id="omitBox" class="omitBox">

                                                <text class="omitData">123</text>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="findResource-legend">
                                        <div class="bg-txt">
                                            <i class="icon" style="background-color: #F27E1BFF"></i>
                                            <text class="str">复购比例</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            2%
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="canvas">
                                <canvas id="findResource"></canvas>
                            </div> -->
                        </div>
                    </div>
                </div>

            </div>

            <div class="row" id="hiddenData">
                <div class="middleData">
                    <div class="middleItem">
                        <div class="card-dth3">
                            <div class="user">
                                <div class="user-name" style="margin-top: 10px;">8.8月会员</div>
                                <div class="u-rig" style="justify-content: flex-end;">
                                    <div class="findResource-legend">
                                        <div class="bg-txt">
                                            <i class="icon"></i>
                                            <text class="str">总营业额</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$monthData.orderMonthPrice}
                                            <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                            <div id="omitBox" class="omitBox">

                                                <text class="omitData">共 {$monthData.orderMonthTotal} 单</text>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="findResource-legend legendNone">
                                        <div class="bg-txt">
                                            <i class="icon" style="background-color: #F27E1BFF"></i>
                                            <text class="str">复购比例</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$monthData.repurchaseMonthRatio}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <canvas id="middleData1" style="margin: auto;"></canvas>
                        </div>
                    </div>
                    <div class="middleItem">
                        <div class="card-dth3">
                            <div class="user">
                                <div class="user-name" style="margin-top: 10px;">108年会员</div>
                                <div class="u-rig" style="justify-content: flex-end;">
                                    <div class="findResource-legend">
                                        <div class="bg-txt">
                                            <i class="icon"></i>
                                            <text class="str">总营业额</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$yearData.orderYearPrice}
                                            <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                            <div id="omitBox" class="omitBox">

                                                <text class="omitData">共 {$yearData.orderYearTotal} 单</text>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="findResource-legend legendNone">
                                        <div class="bg-txt">
                                            <i class="icon" style="background-color: #F27E1BFF"></i>
                                            <text class="str">复购比例</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$yearData.repurchaseYearRatio}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <canvas id="middleData2" style="margin: auto;"></canvas>
                        </div>
                    </div>
                    <div class="middleItem">
                        <div class="card-dth3">
                            <div class="user">
                                <div class="user-name" style="margin-top: 10px;">499礼包</div>
                                <div class="u-rig" style="justify-content: flex-end;">
                                    <div class="findResource-legend">
                                        <div class="bg-txt">
                                            <i class="icon"></i>
                                            <text class="str">总营业额</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$resourceData.orderResourcePrice}
                                            <span onclick="omitBoxClick(this)" style="font-weight: 200;color: #999999;margin-left: 8px;cursor: pointer;">...</span>
                                            <div id="omitBox" class="omitBox">

                                                <text class="omitData">共 {$resourceData.orderResourceTotal} 单</text>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="findResource-legend legendNone">
                                        <div class="bg-txt">
                                            <i class="icon" style="background-color: #F27E1BFF"></i>
                                            <text class="str">复购比例</text>
                                        </div>
                                        <div class="bg-str" style="margin-left: 15px; font-size: 20px;">
                                            {$resourceData.repurchaseResourceRatio}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <canvas id="middleData3" style="margin: auto;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="demandData">

                </div>

            </div>

            <!-- <div class="middleRow" style="margin-top: -6px;">
                <div class="pullDown" onclick="pullDown()"></div>
                <div class="pullDownText3 pullDownText" onclick="pullDown()">展开</div>
            </div> -->

            <div class="list">
                <div class="list-title">
                    <div class="item {if input('type',1) == 1}activeBtn{/if}" onclick="changeList(1,this)">订单列表</div>
                    <div class="item {if input('type',1) == 2}activeBtn{/if}" onclick="changeList(2,this)">部门财务</div>
                    <div class="item {if input('type',1) == 3}activeBtn{/if}" onclick="changeList(3,this)">收益明细</div>
                    <div class="item {if input('type',1) == 4}activeBtn{/if}" onclick="changeList(4,this)">支出明细</div>
                    <span class="item addAppend" onclick="addClick(this)" style="color: #607CFF;background: #EAEFFF;display: none"></span>
                </div>
                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script type="text/html" id="barDemo">
    {{# if(d.status == 0) { }}
    <button onclick="toSettle({{d.id}})" class="btn btn-sm btn-outline-secondary">待结算</button> {{# } else { }}
    <button class="btn btn-sm btn-outline-secondary" id="disabled" disabled>已结算</button> {{# } }}
</script>
<script>
    function pullDown() {
        if ($('.pullDownText3').text() == '收起') {
            $('.pullDownText3').text('展开')
            $('#hiddenData').css('opacity', 0)
            $('#hiddenData').css('height', 0)
            $('#hiddenData').css('display', 'none')
            $('.middleRow .pullDown').css('right', '48%')
            $('.middleRow .pullDown').css('bottom', '22%')
            $('.middleRow .pullDown').css('transform', 'rotate(180deg)')
        } else if ($('.pullDownText3').text() == '展开') {
            $('.pullDownText3').text('收起')
            $('#hiddenData').css('opacity', 1)
            $('#hiddenData').css('height', '100%')
            $('#hiddenData').css('display', 'block')

            $('.middleRow .pullDown').css('right', '49.5%')
            $('.middleRow .pullDown').css('bottom', '170%')
            $('.middleRow .pullDown').css('transform', 'rotate(0deg)')
        }
    }


    function omitBoxClick(e) {
        let val = $(e).next().css('opacity')
        if (val == 0) {
            $(e).next().css('opacity', '1')
        } else if (val == 1) {
            $(e).next().css('opacity', '0')
        }
    }

    // 部门财务-提交结算
    function toSettle(id) {
        layer.prompt({
            title: '备注',
            formType: 2
        }, function(text, index) {
            $.post("{:url('/finance/branchSettle')}", {
                id: id,
                desc: text
            }, function(res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }


    //切换
    function changeList(t, e) {
        $('.list-title .item').removeClass('activeBtn');
        $(e).addClass('activeBtn');
        console.log(t)
        var type = parseInt(t);
        showAddClick(type);
        initcommList(type);
        window.history.replaceState(null, null, './index.html?type=' + type);
    }

    // 初始请求
    var url = "{:url('/finance/index')}";
    var uri = window.location.search.split('=')[1];
    console.log(uri);
    var type = uri ? uri : 1;
    console.log(type);
    var keyword = '';
    var layer = '';
    layui.use('layer', function() {
        layer = layui.layer;
    });
    initcommList(type);
    showAddClick(type);

    // 显示添加按钮
    function showAddClick(t) {
        // 3=>收益明细  4=>支出明细
        var eles = $('.addAppend');
        eles.css('display', 'none');
        if (t == 3 || t == 4) {
            eles.css('display', 'block');
            eles.text('✚ 添加收益').attr('url', '{:url("/finance/incomeAdd")}?type=3');
            if (t == 4) {
                eles.text('✚ 添加支出').attr('url', '{:url("/finance/expensesAdd")}?type=4');
            }
        }
    }

    // 添加收益/支出
    function addClick(e) {
        console.log(e, $(e).attr('url'));
        window.location.href = $(e).attr('url');
    }

    function initcommList(t, k) {
        var cols;
        if (t == 2) {
            url = "{:url('/finance/branch')}";
            cols = [{
                field: 'nickname_data',
                title: '头像/姓名/序号'
            }, {
                field: 'branch_data',
                title: '部门/提成类型'
            }, {
                field: 'trade_data',
                title: '营业额/提成点'
            }, {
                field: 'commission_data',
                title: '佣金/结算时间'
            }, {
                field: 'desc',
                title: '备注'
            }, {
                field: 'rightbtn',
                title: '操作',
                align: 'center',
                toolbar: '#barDemo'
            }];
        } else {
            var submit_data;
            // 订单列表
            if (t == 1) {
                url = "{:url('/finance/index')}";
                cols = [{
                    field: 'uids_data',
                    title: '用户ID/订单ID'
                }, {
                    field: 'nickname_data',
                    title: '昵称/角色'
                }, {
                    field: 'area_data',
                    title: '地区/身份（来源）'
                }, {
                    field: 'type_data',
                    title: '订单类型/金额'
                }, {
                    field: 'submit_data',
                    title: '提交/付费时间'
                }];
                // 收益明细
            } else if (t == 3) {
                url = "{:url('/finance/income')}";
                cols = [{
                    field: 'user_data',
                    title: '用户ID/昵称'
                }, {
                    field: 'source_data',
                    title: '来源/订单类型'
                }, {
                    field: 'price',
                    title: '收入金额',
                    style: 'color:#FF7F00'
                }, {
                    field: 'pay_time',
                    title: '入账时间'
                }, {
                    field: 'desc',
                    title: '备注'
                }, {
                    field: 'images',
                    title: '凭证'
                }];
                // 支出明细
            } else {
                url = "{:url('/finance/expenses')}";
                cols = [{
                    field: 'user_data',
                    title: '用户ID/昵称'
                }, {
                    field: 'price',
                    title: '支出金额',
                    style: 'color:#FF3A3A'
                }, {
                    field: 'desc',
                    title: '用途'
                }, {
                    field: 'refund_time',
                    title: '支出时间'
                }, {
                    field: 'department',
                    title: '使用部门'
                }, {
                    field: 'images',
                    title: '发票'
                }];
            }
        }
        // layui插件
        layui.use('table', function() {
            var table = layui.table,
                form = layui.form;
            // 表格初始化
            table.render({
                elem: '#linkstable',
                url: url,
                skin: 'line' //行边框风格
                    ,
                even: true //开启隔行背景
                    ,
                method: 'post',
                where: {
                    type: t,
                    keywords: k
                },
                page: true //开启分页
                    ,
                cols: [cols],
                done: function(res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');
                },
                parseData: function(res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list
                    };
                }
            });
        })
    }
</script>
<script>
    // 订单总数
    var chartDom1 = document.getElementById('balanceData');
    var resizeMyChartContainer1 = function() {
        let domWidth = $('.titleData').width();
        chartDom1.style.width = domWidth + 'px';
        chartDom1.style.height = (domWidth / 2) - 155 + 'px';
    };
    resizeMyChartContainer1();
    let totalLabels = "{$orderData.totalIncomeLine.labels}";
    let totalDatas = "{$orderData.totalIncomeLine.datas}";
    let totalDatas1 = "{$orderData.totalExpensesLine.datas}";
    let totalDataDay = totalLabels.split(',');
    let totalDataValue = totalDatas.split(',');
    let totalDataValue1 = totalDatas1.split(',');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    option1 = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: totalDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '8%',
            containLabel: true
        },
        series: [{
            // name: '需求总数\n{c|{}}',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            itemStyle: {
                normal: {
                    color: '#406CE5FF'
                }
            },
            areaStyle: {
                normal: {
                    color: '#F2FBFFFF',
                } //改变区域颜色
            },
            data: totalDataValue,
        }, {
            // name: '当月新增\n{c|{}}',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            itemStyle: {
                normal: {
                    color: '#FF00FFFF'
                }
            },
            areaStyle: {
                normal: {
                    color: '#F9F6FFFF',
                } //改变区域颜色
            },
            emphasis: {
                focus: 'series'
            },
            data: totalDataValue1
        }, ]
    };
    myChart1.setOption(option1);
    myChart1.resize();


    // var chartDom2 = document.getElementById('findResource');
    // var resizeMyChartContainer2 = function () {
    //     let domWidth = $('.card-dth2').width();
    //     chartDom2.style.width = domWidth + 'px'
    //     chartDom2.style.height = (domWidth / 2) + 'px'
    // }
    // resizeMyChartContainer2()

    // var myChart2 = echarts.init(chartDom2);
    // var option2 = {
    //     title: {
    //         // text: '堆叠区域图'
    //     },
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             label: {
    //                 backgroundColor: '#6a7985'
    //             }
    //         }
    //     },
    //     xAxis: [
    //         {
    //             type: 'category',
    //             boundaryGap: true,
    //             data: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 20, 21, 23, 25, 27, 29, 30],
    //             gridLines: {
    //                 display: false
    //             },
    //             //y轴刻度
    //             axisTick: {show: false},
    //             //y轴刻度标签数字
    //             axisLabel: {
    //                 show: true,
    //                 textStyle: {
    //                     color: '#8557C3FF'  //y轴标签颜色
    //                 }
    //             },
    //         }
    //     ],
    //     yAxis: [
    //         {
    //             type: 'value'
    //         }
    //     ],
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '8%',
    //         top: '8%',
    //         containLabel: true
    //     },
    //     series: [
    //         {
    //             // name: '需求总数\n{c|{}}',
    //             type: 'line',
    //             // stack: '总量',
    //             areaStyle: {},
    //             emphasis: {
    //                 focus: 'series'
    //             },
    //             itemStyle: {
    //                 normal: {
    //                     color: '#406CE5FF'
    //                 }
    //             },
    //             areaStyle: {
    //                 normal: {color: '#F2FBFFFF',}//改变区域颜色
    //             },
    //             data: [15, 23, 21, 15, 19, 33, 41, 15, 23, 21, 15, 19, 33, 41, 15, 23, 21, 15, 19, 33, 41, 15, 23, 21, 15, 19, 33, 41, 42],
    //         },
    //         {
    //             // name: '当月新增\n{c|{}}',
    //             type: 'line',
    //             // stack: '总量',
    //             areaStyle: {},
    //             itemStyle: {
    //                 normal: {
    //                     color: '#FF00FFFF'
    //                 }
    //             },
    //             areaStyle: {
    //                 normal: {color: '#F9F6FFFF',}//改变区域颜色
    //             },
    //             emphasis: {
    //                 focus: 'series'
    //             },
    //             data: [22, 18, 19, 23, 29, 33, 31, 22, 18, 19, 23, 29, 33, 31, 22, 18, 19, 23, 29, 33, 31, 22, 18, 19, 23, 29, 33, 31, 32]
    //         },
    //         // {
    //         //     name: '当日新增\n{c|{}}',
    //         //     type: 'line',
    //         //     stack: '总量',
    //         //     areaStyle: {},
    //         //     itemStyle: {
    //         //         normal: {
    //         //             color: '#E6A500FF'
    //         //         }
    //         //     },
    //         //     areaStyle: {
    //         //         normal: {color: '#F9F6FFFF',}//改变区域颜色
    //         //     },
    //         //     emphasis: {
    //         //         focus: 'series'
    //         //     },
    //         //     data: []
    //         // },

    //     ]
    // };

    // myChart2.setOption(option2);
    // myChart2.resize();

    // 499礼包
    var chartDom5 = document.getElementById('middleData3');
    var resizeMyChartContainer5 = function() {
        let domWidth = $('.card-dth2').width();
        chartDom5.style.width = domWidth + 'px'
        chartDom5.style.height = (domWidth / 2) + 'px'
    };
    let resourceLabels = "{$resourceData.orderResourcePriceLine.labels}";
    let resourceDatas = "{$resourceData.orderResourcePriceLine.datas}";
    let resourceDataDay = resourceLabels.split(',');
    let resourceDataValue = resourceDatas.split(',');
    resizeMyChartContainer5();
    var myChart5 = echarts.init(chartDom5);
    var option5 = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: resourceDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '8%',
            containLabel: true
        },
        series: [{
                // name: '需求总数\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F2FBFFFF',
                    } //改变区域颜色
                },
                data: resourceDataValue,
            }
        ]
    };
    myChart5.setOption(option5);
    myChart5.resize();

    // 108年会员
    var chartDom4 = document.getElementById('middleData2');
    var resizeMyChartContainer4 = function() {
        let domWidth = $('.card-dth2').width();
        chartDom4.style.width = domWidth + 'px'
        chartDom4.style.height = (domWidth / 2) + 'px'
    };
    let yearLabels = "{$yearData.orderYearPriceLine.labels}";
    let yearDatas = "{$yearData.orderYearPriceLine.datas}";
    let yearDataDay = yearLabels.split(',');
    let yearDataValue = yearDatas.split(',');
    resizeMyChartContainer4();
    var myChart4 = echarts.init(chartDom4);
    var option4 = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: yearDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '8%',
            containLabel: true
        },
        series: [{
                // name: '需求总数\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F2FBFFFF',
                    } //改变区域颜色
                },
                data: yearDataValue,
            }
        ]
    };
    myChart4.setOption(option4);
    myChart4.resize();

    // 8.8月会员
    var chartDom3 = document.getElementById('middleData1');
    var resizeMyChartContainer3 = function() {
        let domWidth = $('.card-dth2').width();
        chartDom3.style.width = (domWidth) + 'px';
        chartDom3.style.height = (domWidth / 2) + 'px';
    };
    let monthLabels = "{$monthData.orderMonthPriceLine.labels}";
    let monthDatas = "{$monthData.orderMonthPriceLine.datas}";
    let monthDataDay = monthLabels.split(',');
    let monthDataValue = monthDatas.split(',');
    resizeMyChartContainer3();
    var myChart3 = echarts.init(chartDom3);
    var option3 = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: monthDataDay,
            gridLines: {
                display: false
            },
            //y轴刻度
            axisTick: {
                show: false
            },
            //y轴刻度标签数字
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#8557C3FF' //y轴标签颜色
                }
            },
        }],
        yAxis: [{
            type: 'value'
        }],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '8%',
            containLabel: true
        },
        series: [{
                // name: '需求总数\n{c|{}}',
                type: 'line',
                // stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#F2FBFFFF',
                    } //改变区域颜色
                },
                data: monthDataValue,
            }
        ]
    };
    myChart3.setOption(option3);
    myChart3.resize();

    // 市场需求订单数据
    var chartDom = document.getElementById('demandData');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$demandData.totalDemandPrice}",
                    textAlign: 'center',
                    fill: '#333',
                    fontSize: 22,
                    fontWeight: 'bold',

                }
            }, {
                type: 'text',
                left: 'center',
                top: '55%',
                style: {
                    //value当前进度
                    text: "成交总金额",
                    textAlign: 'center',
                    fill: '#999999FF',
                    fontWeight: 'bold',
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'], //['外圆大小', '内圆大小']
            center: ['50%', '50%'], //圆心位置['左右'， '上下']
            hoverAnimation: false, //取消鼠标悬停动画
            animationEasing: 'cubicOut', //设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "0",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$demandData.totalDemandPrice}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#01C2FFFF'
                                }, {
                                    offset: 1,
                                    color: '#2B44FDFF'
                                }])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);


    window.onresize = function() {
        resizeMyChartContainer1()
        myChart1.resize();
        // resizeMyChartContainer2()
        // myChart2.resize();
        resizeMyChartContainer3();
        myChart3.resize();
        resizeMyChartContainer4();
        myChart4.resize();
        resizeMyChartContainer5();
        myChart5.resize();
    }
</script>
<style>
    .middleRow {
        position: relative;
        width: 100%;
        height: 20px;
    }
    
    .middleRow .pullDown {
        position: absolute;
        transform: translate(-50%, -50%);
        right: 48%;
        bottom: 22%;
        transform: rotate(180deg);
        /* right: 49.5%;
        bottom: 170%;
        transform: rotate(0deg); */
        cursor: pointer;
    }
    
    .middleRow .pullDownText {
        position: absolute;
        right: 50%;
        bottom: 50%;
        color: #5C5E66FF;
        cursor: pointer;
    }
    
    .demandDataArr {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
        justify-content: space-evenly;
    }
    
    .demandDataArr span {
        font-size: 30px;
        margin-bottom: 10px;
        flex: 0 0 30%;
        display: grid;
        place-items: center;
    }
    
    .demandDataArr span p {
        font-size: 18px;
        color: #999999FF;
    }
    
    .demandData {
        width: 100%;
        background-color: #fff;
        margin: 0 15px 15px;
        border-radius: 8px;
    }
    
    .middleData {
        display: flex;
        width: 100%;
        margin: 0 15px 15px;
    }
    
    .middleData .middleItem {
        flex: 1;
        background-color: #fff;
        margin-right: 15px;
        border-radius: 8px;
    }
    
    .middleData .middleItem:nth-child(3) {
        margin-right: 0;
    }
    
    .middleRow {
        position: relative;
        width: 100%;
        height: 20px;
    }
    
    .middleRow .pullDown {
        position: absolute;
        transform: translate(-50%, -50%);
        right: 48%;
        bottom: 22%;
        transform: rotate(180deg);
        /* right: 49.5%;
        bottom: 170%;
        transform: rotate(0deg); */
        cursor: pointer;
    }
    
    .middleRow .pullDownText {
        position: absolute;
        right: 50%;
        bottom: 50%;
        color: #5C5E66FF;
        cursor: pointer;
    }
    
    .pullDown:before,
    .pullDown:after {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-right: 10px transparent dashed;
        border-bottom: 10px #fff solid;
    }
    
    .pullDown:before {
        border-bottom: 10px #898A8FFF solid;
    }
    
    .pullDown:after {
        top: 2px;
        /*覆盖并错开1px*/
        border-bottom: 10px #f1f2f7 solid;
    }
    
    .findResource-legend {
        margin-right: 50px;
    }
    
    .icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-top: 3px;
        background-color: #5B78FFFF;
    }
    
    .omitBox,
    .omitBox2 {
        opacity: 0;
        position: absolute;
        top: 135%;
        left: -76%;
        width: 126px;
        height: 145px;
        background-color: #fff;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-direction: column;
    }
    
    .omitBox:before {
        content: '';
        position: absolute;
        top: -7%;
        right: 23%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 11px solid #f3f3f3;
    }
    
    .omitBox2:before {
        content: '';
        position: absolute;
        top: -7%;
        right: 7%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 11px solid #f3f3f3;
    }
    
    .omitBox text,
    .omitBox2 text {
        font-weight: 0;
        font-size: 16px;
        color: #9D9D9DFF;
    }
    
    .card-dth2 {
        /* display: flex; */
        /* flex-direction: column; */
        height: 100%;
    }
    
    .canvas {
        flex: 1;
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    .titleData {
        width: 100%;
        display: flex;
        padding: 15px;
    }
    
    .titleData .left {
        flex: 1;
    }
    
    .titleData .left p {
        font-size: 26px;
        color: #5B78FFFF;
        padding-left: 3px;
    }
    
    .titleData .right {
        display: flex;
        flex: 2;
        justify-content: space-evenly;
    }
    
    .titleData .right .right-item i {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #5B78FFFF;
    }
    
    .titleData .right .right-item:nth-child(2) i {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #F74AFFFF;
    }
    
    .titleData .right .right-item strong {
        display: block;
        font-size: 24px;
    }
    
    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }
    
    .list-title {
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .list-title .item {
        font-size: 14px;
        border-radius: 3px;
        background-color: #F0F0F0FF;
        color: #999999FF;
        display: grid;
        place-items: center;
        margin-right: 45px;
        cursor: pointer;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .d-right {
        display: flex;
        margin: 30px 40px;
    }
    
    .d-right .left-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    }
    
    .d-right .left-item .item {
        display: flex;
        height: 82px;
        /* width: 348px; */
        width: 100%;
        background-color: #FDFBF2FF;
        align-items: center;
        margin: 0 5px 32px 10px;
        padding-left: 20px;
    }
    
    .d-right .left-item .item:nth-child(3) {
        background-color: #FCF6F2FF;
    }
    
    .d-right .left-item .item .title {
        color: #666666FF;
        font-size: 16px;
    }
    
    .d-right .left-item .item span,
    .d-right .right-item .item span {
        color: #0DA877FF;
        font-size: 18px;
        margin-right: 20px;
    }
    
    .d-right .right-item .item p {
        display: inline-block;
        margin-right: 20px;
        color: #FF3A3AFF;
        font-size: 18px;
    }
    
    .d-right .left-item .item strong,
    .d-right .right-item .item strong {
        color: #17181AFF;
        font-size: 22px;
    }
    
    .d-right .right-item {
        flex: 1;
        display: flex;
        flex-direction: column-reverse;
    }
    
    .d-right .right-item .item {
        display: flex;
        height: 82px;
        /* width: 348px; */
        width: 100%;
        background-color: #F5F7FDFF;
        margin: 0 5px 32px 10px;
        align-items: center;
        padding-left: 20px;
    }
    
    .d-left {
        margin-bottom: 10px;
    }
    
    .d-left .financeData {
        display: flex;
        width: 260px;
    }
    
    .d-left .financeData span {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    .d-left .financeData span:nth-child(1) {
        margin-left: 30px;
    }
    
    .d-left .financeData span p {
        font-size: 20px;
        color: #2F3133FF;
        font-weight: 600;
    }
    
    .d-left .financeData span .name {
        display: flex;
        align-items: center;
        margin-top: 5px;
        color: #999999FF;
    }
    
    .d-left .financeData span .name i {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 5px;
    }
    
    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }
    
    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }
    
    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }
    
    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .sel-bottom:active {
        background: #3377FF;
    }
    
    .card-dth {
        padding: 8px;
        display: flex;
    }
    
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }
    
    .user {
        display: flex;
        justify-content: space-between;
    }
    
    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;
    }
    
    .bg-txt {
        display: flex;
        margin-top: 5px;
    }
    
    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }
    
    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }
    
    .rig-img img {
        width: 9rem;
        height: 9rem;
    }
    
    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    
    .bg-str {
        font-family: 'AliM';
        text-align: center;
        position: relative;
    }
    
    .u-rig {
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
    }
    
    .txt-cen {
        text-align: center;
    }
    
    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }
    
    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }
    
    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    
    .d-th {
        padding-left: 10px;
        text-align: center;
    }
    
    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }
    
    .t {
        color: #576AFB;
    }
    
    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }
    
    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }
    
    .b {
        color: #FF6739;
    }
    
    .w {
        color: #00A0FF;
    }
    
    .keword {
        display: flex;
    }
    
    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }
    
    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }
    
    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>

</html>